{% load staticfiles %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="{% static 'common/vis/vis.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'common/bootstrap/css/bootstrap.min.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'common/bootstrap/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'common/vis/vis.min.js' %}"></script>
    {% block extralmedias %} {% endblock %}
    <style type="text/css">
        html,body{
            margin:0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #form_div{
            background: #fff;
            width: 30%;
            height: 40%;
            margin: auto;
            border-radius: 10px;
        }
        #form_div h4{
            padding: 5px 0;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 1px solid #e5e5e5;
        }
        #workflow_form ul{
            list-style: none;
            padding: 0 20px;
        }
        .form_ul li{
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .form_ul label{
            width: 30%;
            text-align: right;
            float: left;
            height: 30px;
            line-height: 30px;
        }
        .form_ul input,.form_ul select{
            width: 65%;
            float: right;
            padding: 0 12px;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            color: #555;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form_ul .text{
            margin-top: 50px;
            font-size: 18px;
        }
        .form_bottom{
            text-align: right;
            padding: 10px 30px;
        }
        .form_bottom button{
            margin-right: 20px;
        }
        select[name="workflow"]{
            margin: 10px 20px;
            width: 120px;
            height: 28px;
            float: left;
            border-radius: 4px;
            padding-left: 10px;
        }
        #add_workflow{
            float: left;
            margin-top: 10px;
            height: 28px;
            line-height: 16px;
        }
        .workflow_head{
            width: 100%;
            overflow: hidden;
        }
        .workflow_body{
            width: 100%;
            overflow: hidden;
        }
        .body_head{
            background: #1B7BBA;
            color: #fff;
            padding: 10px 20px;
        }
    </style>
    <script type="text/javascript">
        // vis.js相关方法
        var nodes = [];
        var edges = [];
        var network = null;

        function push_data(msg){
            for(i in msg.nodes){
                var count = 0;
                for(j in nodes){
                    if(nodes[j]['id']==msg.nodes[i]['id']){
                        count += 1;
                        break;
                    }
                }
                if(!count){
                    nodes.push(msg.nodes[i]);
                }
            }
            for(i in msg.edges){
                var count = 0;
                for(j in edges){
                    if(edges[j]['from']==msg.edges[i]['from']&&edges[j]['to']==msg.edges[i]['to']){
                        count += 1;
                        break;
                    }
                }
                if(!count){
                    edges.push(msg.edges[i]);
                }
            }
        }

        function destroy() {
          if (network !== null) {
            network.destroy();
            nodes = [];
            edges = [];
            network = null;
          }
        }

        function gen_network(container){
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                layout: {
                  hierarchical: {
                    sortMethod: "directed"
                  }
                },
                nodes: {
                  shape: 'dot',
                  size: 30,
                  font: {
                      size: 12,
                      color: '#000'
                  },
                  borderWidth: 2
                },
                edges: {
                  smooth: true,
                  arrows: {to : true }
                }
            };
            network = new vis.Network(container, data, options);
            network.on("click", function (params) {
                click_fuc(params);
            });
        }
    </script>
</head>
<body>
    {% block content %} {% endblock %}
    <div class="modal fade in" id="form_div">
        <h4></h4>
        <div class="form_detail">
            <form id="workflow_form">
                <ul class="form_ul">

                </ul>
            </form>
            <div class="form_bottom">
                <input type="hidden" name="form_url" id="form_url" />
                <button class="btn btn-primary" id="submit_btn">确定</button>
                <button data-dismiss="modal" class="btn btn-default close_btn">关闭</button>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    // 表单方法
    var others = [];
    $('#submit_btn').click(function(){
        var serializeObj={};
        $($('#workflow_form').serializeArray()).each(function(){
             serializeObj[this.name]=this.value;
        });

        if(others.length){
            for(i in others){
                serializeObj[others[i]['name']] = others[i]['val'];
            }
        }
        console.log(serializeObj);
        var url = $('#form_url').val();
        $.ajax({
            url:url,
            type:'POST',
            data:serializeObj,
            success:function(data){
                if(data.status){
                    if(data.refresh){
                        location.reload();
                    }else{
                        if(data.id){
                            reset_nodeprocess_form(data.id);
                            if(data.redraw){
                                draw(data.id);
                            }else{
                                add_data(data.id);
                            }
                        }else{
                            after_open();
                        }
                    }
                }else{
                    alert(data.msg);
                }
            }
        })
        $('.close_btn').trigger('click');
    })

    $('.close_btn').click(function(){
        others = [];
    })

    $('.click_btn').click(function(){
        var title = $(this).text();
        var form = $(this).attr('data-form');
        var url = $(this).attr('data-url');
        $('#form_div h4').text(title);
        $('#workflow_form ul').html(form);
        $('#form_url').val(url);
    })

</script>
</html>